<!DOCTYPE html>
<html>
<head>
    <title>三巨头会议室</title>
    <html lang="zh-CN" xml:lang="zh-CN">
    <meta http-equiv="content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">
    <link href="http://cdn.bootcss.com/bootstrap-modal/2.2.6/css/bootstrap-modal.min.css" rel="stylesheet">
    <style type="text/css">
        .ibar {
            height: 160px;
            width: 100%;
            border-top:2px solid #eee;
            background-color: #FFF;
            position: fixed;
            bottom: 0px;
            z-index: 1000;
        }
        #chat-content {
            overflow:auto;
            height: 350px;
            width: 100%;
        }
    </style>
    </head>
<body>
<div class="container-fluid">
    <div class="page-header">
        <h1>三巨头会议室</h1>
        <p>you can see many da bai tui in here!</p>
    </div>
    <div class="row ibar">
        <div class="input-group" style="margin-top: 24px;">
            <span class="input-group-addon" id="nickname">nickname</span>
            <input type="text" class="form-control" id="msg" placeholder="say..." aria-describedby="basic-addon1">
        </div>
        <button type="submit" id="send" class="btn btn-primary" style="margin-top:24px;">发送</button>
        <button type="button" id="editname" style="margin-top:24px;" class="btn btn-default" data-toggle="modal" data-target="#myModal">
            修改昵称
        </button>
    </div>
    <div class="list-group" id="chat-content" style="margin-top: 20px;">
        <a href="#" class="list-group-item active">
            聊天内容
        </a>
        <a href="#" class="list-group-item">大家好！</a>
    </div>
</div>


<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">修改昵称</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="exampleInputEmail1">昵称</label>
                    <input type="text" class="form-control" id="myname" placeholder="NickName">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" id="editmyname" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

<script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src='//cdn.bootcss.com/socket.io/1.3.7/socket.io.js'></script>
<script src="http://cdn.bootcss.com/bootstrap-modal/2.2.6/js/bootstrap-modal.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap-modal/2.2.6/js/bootstrap-modalmanager.min.js"></script>
<script type="text/javascript">
    window.onload = function(){

    }
    $("nickname").html(getCookie('nickname'));

    $("#editmyname").click(function(){
        $("#nickname").html($("#myname").val());
        $("#myModal").modal('hide');
        document.cookie="nickname="+$("#myname").val();
    });

    var socket = io('http://139.224.9.213:9999');
    var uuid;
    uuid = getCookie('uuid');
    if (uuid == '') {
        uuid = generateUUID();
        document.cookie="uuid="+uuid;
    }
    console.log(getCookie('nickname'),777)
    if (getCookie('nickname') == 'nickname' || getCookie('nickname') == '') {
        $("#myModal").modal();
    } else {
        $("#nickname").html(getCookie('nickname'))
    }

    socket.on('connect', function(){
        console.log('connect success');
        socket.emit('login', {user: getCookie('nickname')});

        socket.on('login', function(rs){
            if (rs.error) {
                // console.log(rs.msg);
                return;
            }
            var word = '<a href="#" class="list-group-item animated flipInX">系统提示: '+rs.msg+'</a>';
            $("#chat-content").append(word);
            var div = document.getElementById('chat-content');
            div.scrollTop = div.scrollHeight;

            // $("#nickname").html(rs.data.nickname);
        });

        // console.log(uuid)

        socket.on('msg', function(rs){
            console.log(rs, 666)
            console.log(rs.msg,12);
            var word = '<a href="#" class="list-group-item animated flipInX">'+rs.by+'说:'+rs.msg+'</a>';
            $("#chat-content").append(word);
            var div = document.getElementById('chat-content');
            div.scrollTop = div.scrollHeight;
        });

        $("#send").click(function(){
            if ($("#nickname").html() == '') {
                alert('please edit name');
                return;
            }
            var msg = $("#msg").val();
            if (msg == '') {
                alert('can not be null');
                return;
            }
            // console.log(msg)
            var data = {
                'group': 'zz',
                'msg': msg,
                'by': $("#nickname").html()
            }
            socket.emit('msg', data);
            $("#msg").val('');
            //on msg
        });
    });



    function generateUUID() {
        var d = new Date().getTime();
        var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
            var r = (d + Math.random()*16)%16 | 0;
            d = Math.floor(d/16);
            return (c=='x' ? r : (r&0x3|0x8)).toString(16);
        });
        return uuid;
    }
    function getCookie(name) {
        var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
        if(arr=document.cookie.match(reg))
            return unescape(arr[2]);
        else
            return '';
    }

</script>
</body>
</html>